import 'package:flutter/material.dart';

class XAppBar extends StatefulWidget implements PreferredSizeWidget {
  // final Widget child; //从外部指定内容
  final Color statusBarColor; //设置statusbar的颜色
  final Color bgColor; //导航栏背景颜色
  final double elev; // 沉浸式状态栏
  final IconData icon; //图标
  final Color iconColor; //图标颜色
  final Function fun; //点击的回调
  final String title;
  final bool centerTitle;
  XAppBar(
      {
        // this.child,
      this.statusBarColor,
      this.bgColor,
      this.elev = 0,
      this.icon = Icons.navigate_before,
      this.iconColor = Colors.white,
      this.fun,
      this.title,
      this.centerTitle = true})
      : super();

  @override
  State<StatefulWidget> createState() {
    return new _XAppBarState();
  }

  @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}

/**
 * 这里没有直接用SafeArea，而是用Container包装了一层
 * 因为直接用SafeArea，会把顶部的statusBar区域留出空白
 * 外层Container会填充SafeArea，指定外层Container背景色也会覆盖原来SafeArea的颜色
 */
class _XAppBarState extends State<XAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height:
          kToolbarHeight + MediaQuery.of(context).padding.top, //自动设置为系统appbar高度
      width: MediaQuery.of(context).size.width,
      color: widget.statusBarColor,
      child: SafeArea(
        top: true,
        bottom: false,
        child: AppBar(
          elevation: widget.elev,
          backgroundColor: widget.bgColor,
          centerTitle: widget.centerTitle,
          title: Text(
            widget.title,
            style: TextStyle(
                color: widget.iconColor,
                fontSize: 18,
                fontWeight: FontWeight.bold),
          ),
          leading: GestureDetector(
            child: IconButton(
              icon: Icon(
                widget.icon,
                color: widget.iconColor,
              ),
              onPressed: () {
                Navigator.pop(context);
              },
            ),
          ),
        ),
      ),
    );
  }
}
